<template>
	<view class="content">
		<view class="btnList">
			<u-button type="primary" @click="btnClick(1)">一列</u-button>
			<u-button type="success" @click="btnClick(2)">二列</u-button>
			<u-button type="warning" @click="btnClick(3)">三列</u-button>
			<u-button type="error" @click="btnClick(4)">四列</u-button>
		</view>
		<u-button type="info" @click="address">请选择地址</u-button>
		<view class="textTisp">
			{{name}}
		</view>
		<!-- <city-choice ref="cityChoice" @change="change" grade='3' :modal="false" gutter='40' /> -->
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="15" close-icon-color="#FFFFFF">
			<view class="popupTitle">
				城市选择
			</view>
			<city-choice ref="cityChoice" @change="change" @tabsChange="tabsChange" :grade='column' :modal="true"
				gutter='40' />
		</u-popup>

	</view>
</template>

<script>
	import cityChoice from "@/componets/cityChoice.vue"
	export default {
		components: {
			cityChoice
		},
		data() {
			return {
				current: 0,
				name: '',
				show: false,
				list3: [{
					name: '请选择',
					code: null
				}],
				column: 4,
				currentIndex: 0
			}
		},
		onLoad() {
			// this.getCity(1)
		},
		methods: {
			btnClick(column) {
				this.column = column
				// #ifdef MP-WEIXIN
				this.$refs.cityChoice.list = [{
					name: '请选择',
					code: null
				}]
				this.$refs.cityChoice.current = 0
				// #endif
			},
			getCity(level, parentCode = null, obj) {
				if (parentCode == 442000000000 || parentCode == 441900000000) level = level + 1
				this.$http.get('api接口l地址', {
					level,
					parentCode
				}).then(res => {
					if (typeof obj != 'undefined') {
						res.data = res.data.map(item => {
							item.sign = false
							if (obj.code == item.code) {
								item.sign = true
							}
							return item
						})
					}
					this.$refs.cityChoice.city = res.data
				})
			},
			address() {
				this.show = true
				this.getCity(this.currentIndex+1,this.list3[this.currentIndex].parentCode,this.list3[this.currentIndex])
				// #ifdef H5
				// 不使用setTimeout -- this.$refs.cityChoice获取到的是undefined
				setTimeout(()=> {
					this.$refs.cityChoice.tabsIndex = this.currentIndex
					this.$refs.cityChoice.list = this.list3
					
				},100)
				// #endif
			},
			change(e) {
				if (e.list) {
					this.currentIndex = e.index
					this.list3 = e.list
					e.list = e.list.map(item => {
						return item.name
					})
					this.name = e.list.join(',')
					// this.name = this.name.replace(/,/g, "")  //去掉字符串中所有的逗号
					this.name = this.name.replace(/,/g, '--') //将字符串中所有的逗号替换成 --
					this.show = false
					return
				}
				this.getCity(e.index + 1, e.current.code)
			},
			tabsChange(e) {
				if (e.current.name == '请选择') {
					this.getCity(e.index + 1, e.list.code)
					return
				}
				this.getCity(e.index + 1, e.list.parentCode, e.current)
			}
		}
	}
</script>

<style>
	.btnList {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.textTisp {
		margin-top: 10rpx;
		font-size: 18px;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.popupTitle {
		position: fixed;
		width: 100%;
		z-index: 1;
		text-align: center;
		padding: 25rpx 0;
		font-weight: bold;
		background-color: #2979ff;
		color: #FFFFFF;
	}
</style>
